<template>
  <div class="account-info">
    <SectionTitle title="账号信息" font-size="16px" style="margin-bottom: 8px"/>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col v-for="field in accountFields" :span="8" :key="field.key">
          <el-form-item style="margin-bottom: 0px;">
            <el-tooltip slot="label" :content="`${field.label}：`" placement="top" effect="dark">
              <div class="item ellipsisOne">
                {{ `${field.label}：` }}
              </div>
            </el-tooltip>
            <ToolTip
              v-if="field.type === 'number'"
              :content="getData(field) | numberTextFormat(2)"
              :tool-tip="getData(field) | moneyFilter" />
            <div v-else-if="field.type === 'platform'" class="flex-center">
              <PlatformIcon :data="formatPlatform(detailInfo.accountInfo.platformId)" />
              {{ formatPlatform(detailInfo.accountInfo.platformId) || '--' }}
            </div>
            <div v-else-if="field.type === 'ratio'">{{ getData(field) ? `${getData(field)}%` : '--' }}</div>
            <div v-else-if="field.type === 'gender'">{{ getData(field) ? '女' : '男' }}</div>
            <ToolTip v-else-if="field.key === 'account'" :content="getData(field)" is-can-click @handelClick="toResource" />
            <ToolTip v-else-if="field.key === 'journalNode'" :content="getData(field) | journalNodeFilter" />
            <ToolTip v-else-if="field.type === 'cooperationStatusFilter'" :content="getData(field) | cooperationStatusFilter"/>
            <CheckUserInfo v-else-if="field.type === 'mulUser'" :multiple="true" :user-list="getData(field)" :label-name="'userName'" />
            <div v-else-if="field.type === 'tag'" class="labels">
              <span v-for="(item, index) in getData(field)" :key="index" class="item-wrap">
                <el-tooltip v-if="item.name.length > 20" class="item" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ item.name }}</div>
                  <el-tag plain size="mini">{{ item.name }}</el-tag>
                </el-tooltip>
                <el-tag v-else plain size="mini">{{ item.name }}</el-tag>
              </span>
            </div>
            <ToolTip v-else :content="getData(field)" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import { mapState } from 'vuex';
import PlatformIcon from '@/components/Common/platformIcon';
import { cooperationStatusFilter } from '@/utils/accountCommonData';
import { getFields } from '../components/data';
import { journalNodeFilter } from '@/utils/const/resouce';
import { hasRouteAuth } from '@/utils/permission';
import { numberTextFormat, moneyFilter } from '@/filters/number';
import { platformList } from '@/api/select';
import math from '@/utils/math';
export default {
  components: {
    SectionTitle,
    PlatformIcon
  },
  filters: { numberTextFormat, moneyFilter, cooperationStatusFilter, journalNodeFilter },
  props: {
    detailInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      accountFields: [],
      orderPlatformOption: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  watch: {
    'detailInfo': {
      handler(val) {
        if (val.accountInfo && val.accountInfo.platformCategory) {
          this.accountFields = getFields(val.accountInfo.platformCategory).find(it => it.key === 'accountsInfo').children;
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.getPlatformList();
  },
  methods: {
    getFields,
    hasRouteAuth,
    getData(field) {
      if (field.key === 'talentSharingRatio' && this.detailInfo.accountInfo.profitSharingRatio) {
        return math.subtract(100, this.detailInfo.accountInfo.profitSharingRatio);
      }
      return this.detailInfo.accountInfo[field.key];
    },
    // 获取下单平台的列表
    async getPlatformList() {
      try {
        const result = await platformList();
        result.data.forEach((i) => {
          i.label = i.value;
          i.value = i.id;
        });
        this.orderPlatformOption = result.data;
      } catch (error) {
        console.log(error);
      }
    },
    formatPlatform(id) {
      const res = this.orderPlatformOption.filter(item => {
        if (item.id === id) {
          return item;
        }
      });
      return res.length ? res[0].label : '--';
    },
    toResource() {
      if (this.hasRouteAuth('medium:resource:admin')) {
        const routeUrl = this.$router.resolve({
          name: 'detailResource',
          params: { resourceId: this.detailInfo.id }
        });
        window.open(routeUrl.href, '_blank');
      } else {
        this.$message.warning('您暂无账号资源可读权限，请联系管理员添加');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.account-info {
  ::v-deep {
    .el-form-item__content {
      .labels {
        .item-wrap {
          margin-right: 4px;
          display: inline-block;
          height: 24px;
        }
        .el-tag {
          max-width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-right: 5px;
          background:rgba(239,243,251,1);
          border-radius:4px;
          border: none;
          padding: 2px 8px;
          font-size:12px;
          font-weight:400;
          color:rgba(64,110,255,1);
        }
      }
    }
  }
}
</style>
